<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<view class="pc">
				<y-bread :name="pageName"></y-bread>
			</view>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right">
					<view class="kfnav">
						<view :class="kftype == 'liuyan'?'kfnav-item active':'kfnav-item'" @click="kftype ='liuyan'">
							<text>{{$t('index.kfly')}}</text>
						</view>
						<view :class="kftype == 'jilu'?'kfnav-item active':'kfnav-item'" @click="kftype ='jilu'">
							<text>{{$t('index.wdjl')}}</text>
						</view>
					</view>

					<view class="kfbody" v-show="kftype == 'liuyan'">
						<view class="kfmain">
							<view class="km-title">
								{{$t('index.wtlb')}}：
							</view>
							<view class="km-picker">
								<uni-easyinput v-model="title" :placeholder="$t('index.qtxwtbt')"></uni-easyinput>
								<!-- <view class="km-item">
									<uni-data-select v-model="qus1" :localdata="qusRange1"
										@change="changeQus1"></uni-data-select>
								</view>
								<view class="km-item">
									<uni-data-select v-model="qus2" :localdata="qusRange2"
										@change="changeQus2"></uni-data-select>
								</view> -->
							</view>
							<view class="km-title km-content">
								{{$t('index.wtnr')}}：
							</view>
							<view class="km-msg">
								<uni-easyinput type="textarea" v-model="msg"
									:placeholder="$t('index.qtxwtnr')"></uni-easyinput>
							</view>
						</view>
						<view class="kfbtn">
							<button @click="send">{{$t('index.sc')}}</button>
						</view>
						<view class="kftips">
							{{$t('index.kftip')}}
						</view>
					</view>
					<view class="kfbody" v-show="kftype == 'jilu'">
						<view class="kfmain" v-show="jlitem == ''">
							<view class="jl-list" v-if="jlList.length != 0">
								<view class="jl-item" v-for="(item,index) in jlList" :key="index"
									@click="chooseItem(item)">
									<view class="jl-left">
										<view class="jl-title">
											{{$t('index.wtbt')}}：{{item.title}}
										</view>
										<view class="jl-text">
											{{item.content}}
										</view>
										<view class="jl-text">
											{{$t('index.tjsj')}}:{{item.create_time}}
										</view>
									</view>
									<uni-icons type="right" :size="15" color="#777"></uni-icons>
								</view>
							</view>
						</view>
						<view class="jldetail" v-if="jlitem != ''">
							<view class="jl-no">
								{{$t('index.wtdbh')}}：P2312041700109
							</view>
							<view class="d-box">
								<view class="d-item-li">
									{{$t('index.ndly')}}
								</view>
								<view class="d-item-input">
									{{jlitem.title}}
								</view>
								<view class="d-item-time">
									{{jlitem.create_time}}
								</view>
							</view>
							<view class="d-box kfbox" v-if="jlitem.replay">
								<view class="d-item-li">
									<uni-icons type="info" :size="20"></uni-icons>
									{{$t('index.kfhf')}}
								</view>
								<view class="d-item-input">
									{{jlitem.replay}}
								</view>
								<view class="d-item-time">
									{{jlitem.replay_time}}
								</view>
							</view>
							<view class="back">
								<button @click="backList">{{$t('index.hsy')}}</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		feedback,
		feedBackLst
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.kfly'),
				kftype: 'liuyan',
				qus1: '',
				qus2: '',
				qusRange1: [],
				qusRange2: [],
				msg: '',
				title: '',
				jlList: [],
				jlitem: '',
			}
		},
		onLoad() {
			this.feedBackLst()
		},
		methods: {
			feedBackLst() {
				feedBackLst().then(res => {
					this.jlList = res.data
				})
			},
			backList() {
				this.jlitem = ''
			},
			chooseItem(item) {
				this.jlitem = item
			},
			send() {
				feedback({
					title: this.title,
					content: this.msg
				}).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 0) {

					}
				})
			},
			changeQus1(e) {
				console.log(e)
			},
			changeQus2(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.jl-item {
		font-size: 13px;
		cursor: pointer;
		border-radius: 5px;
		border: 1px solid #d4d9de;
		padding: 12px 35px 12px 25px;
		line-height: 1.5;
		margin-bottom: 10px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.jl-left {
			width: 80%;

			.jl-text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.jl-title {
				font-size: 14px;
				margin-bottom: 2px;
			}
		}
	}

	.jl-no {
		margin-bottom: 20px;
		font-size: 14px;
	}

	.back {
		button {
			border-radius: 4.5px;
			font-size: 14px;
			text-align: center;
			box-sizing: border-box;
			display: inline-block;
			background-color: #ffffff;
			color: #666666;
			cursor: pointer;
			border: 1px solid #bbbbbb;
			width: 131px;
			height: 40px;
			line-height: 40px;
			margin-right: 5px;
		}
	}

	.d-box {
		font-size: 14px;
		margin-bottom: 10px;

		.d-item-li {
			display: flex;
			justify-content: flex-end;
			margin-bottom: 8px;
		}

		.d-item-input {
			border-radius: 5px;
			border: 1px solid #bbbbbb;
			line-height: 1.5;
			font-size: 13px;
			padding: 15px;
			margin-bottom: 5px;
			overflow-wrap: break-word;
		}

		.d-item-time {
			text-align: right;
			color: #666;
			font-size: 12px;
		}

		&.kfbox {
			.d-item-li {
				justify-content: flex-start;
			}
		}
	}

	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;

			.kfnav {
				display: flex;
				align-items: center;

				.kfnav-item {
					width: 185px;
					height: 52px;
					line-height: 45px;
					display: inline-block;
					border-right: 1px solid #cccccc;
					border-left: 1px solid #cccccc;
					border-bottom: 1px solid #cccccc;
					border-top: 3px solid #d8d8d8;
					background: #f0f0f0;
					text-align: center;
					box-sizing: border-box;
					position: relative;
					z-index: 3;
					cursor: pointer;

					&.active {
						background: #fff;
						border-bottom: 3px solid #fff;
					}
				}
			}

			.kfbody {
				display: block;
				position: relative;
				z-index: 2;
				top: -1px;
				width: 100%;
				border: 1px solid #cccccc;
				padding: 20px 20px 30px;
				background: white;
				overflow-y: auto;
				box-sizing: border-box;

				.kfmain {
					min-height: 250px;

					.km-title {
						font-size: 16px;
						line-height: 1.5;
						color: #333333;
						display: block;
						margin-bottom: 10px;
					}

					.km-content {
						margin-top: 20px;
					}

					.km-picker {
						display: flex;

						.km-item {
							width: 50%;
							padding-right: 5%;
							box-sizing: border-box;
						}
					}
				}

				.kfbtn {
					button {
						border-radius: 4.5px;
						font-size: 14px;
						text-align: center;
						box-sizing: border-box;
						display: inline-block;
						background-color: #ff5353;
						color: #ffffff;
						cursor: pointer;
						border: 1px solid #ff5353;
						width: 131px;
						height: 40px;
						line-height: 40px;
					}
				}

				.kftips {
					color: #666666;
					line-height: 1.5;
					margin: 10px 0px;
				}
			}
		}
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;

				.passwordbox {
					padding: 10px;
				}
			}
		}

		.pc {
			display: none;
		}
	}
</style>